/* Copyright 2014 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Special attribute used in HTML to hide elements. */
body:not([type]) [visibleif] {
  display: none;
}

body[type='folder'] [invisibleif~='folder'],
body[type='upload-folder'] [invisibleif~='upload-folder'],
body[type='saveas-file'] [invisibleif~='saveas-file'],
body[type='open-file'] [invisibleif~='open-file'],
body[type='open-multi-file'] [invisibleif~='open-multi-file'],
body[type='full-page'] [invisibleif~='full-page'],

body[type='folder'] [visibleif]:not([visibleif~='folder']),
body[type='upload-folder'] [visibleif]:not([visibleif~='upload-folder']),
body[type='saveas-file'] [visibleif]:not([visibleif~='saveas-file']),
body[type='open-file'] [visibleif]:not([visibleif~='open-file']),
body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']),
body[type='full-page'] [visibleif]:not([visibleif~='full-page']) {
  display: none !important;
}

html {
  height: 100%;
  overflow: hidden;
}

html.col-resize * {
  cursor: col-resize !important;
}

/* Outer frame of the dialog. */
body {
  -webkit-tap-highlight-color: transparent;
  cursor: default;
  display: flex;
  flex: auto;
  flex-direction: column;
  font-size: 13px;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  width: 100%;
}

/* Drop opacity of selected rows to give a visual feedback on copy/cut
 * operation. */
.blink {
  opacity: 0.8;
}

/* Main part of the dialog between header and footer. */
.dialog-container {
  align-items: stretch;
  background-color: var(--cros-sys-app_base_shaded);
  display: flex;
  flex: auto;
  flex-direction: row;
  overflow: hidden;
  padding-inline-end: 16px;
  padding-top: 16px;
  position: relative;
}

/* List and grid are inside this container. */
.dialog-main {
  align-items: stretch;
  background-color: var(--cros-sys-app_base);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex: auto;
  flex-direction: column;
}

/* Directory tree at the left. */
.dialog-navigation-list {
  background-color: inherit;
  border-inline-end: none;
  display: flex;
  flex: none;
  flex-direction: column;
  max-width: 40%;
  min-width: 105px;
  overflow: auto;
  position: relative;
  width: 240px;
}

.dialog-navigation-list-contents {
  display: flex;
  flex: 1 1 auto;
  margin-inline-start: 16px;
  position: relative;
}

#directory-tree {
  bottom: 0;
  flex: none;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;   /* TODO(adanilo): crbug.com/212268 still needed? */
  right: 0;
  top: 0;
}

html.col-resize #directory-tree,
html.breadcrumb-elider-expanded #directory-tree {
  overflow-y: hidden;
}

/* Can be removed after new directory replacement. -- BEGIN */
#directory-tree .tree-item[section-start]::before {
  border-bottom: 1px solid var(--cros-separator-color);
  content: '';
  display: block;
  margin: 8px 0;
  width: 100%;
}

#directory-tree .tree-row {
  cursor: pointer;
  height: auto;
  padding: 4px; /* To cater 8px top/bottom padding and outline. */
}

#directory-tree .tree-row > .file-row {
  align-items: center;
  border-inline-start-width: 0 !important;
  border-radius: 20px;
  box-sizing: border-box;
  color: var(--cros-sys-on_surface);
  display: flex;
  height: 40px;
  padding-inline-end: 12px;
}

#directory-tree .tree-row > .file-row > .expand-icon {
  box-sizing: border-box;
  flex: none;
  height: 20px;
  margin-inline-start: 8px;
  width: 20px;
}

#directory-tree .tree-row > .file-row > .item-icon {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  background-image: none;
  flex: none;
  height: 20px;
  position: relative;
  width: 20px;
}

#directory-tree .tree-row > .file-row > .item-icon[style*='background-image'] {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

#directory-tree .tree-row > .file-row > .label {
  display: block;
  flex: auto;
  font-weight: 500;
  margin-inline-start: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#directory-tree .tree-row .rename-placeholder {
  flex: auto;
  font-weight: 500;
}

#directory-tree .tree-row .rename-placeholder > input {
  width: 100%;
}

#directory-tree [renaming] .root-eject {
  display: none;
}

#directory-tree [renaming] > .tree-row > .file-row > .label {
  display: none;
}

#directory-tree .tree-row > .file-row > input {
  display: none;
  height: 20px;
  margin-inline: 8px 12px;
  overflow: hidden;
}

#directory-tree .tree-item:not([disabled])
    .tree-row[active] > .file-row > input {
  outline: 2px solid var(--cros-sys-inverse_primary);
}

#directory-tree [renaming] > .tree-row > .file-row > input {
  display: block;
}

html:not(.col-resize) #directory-tree .tree-item:not([disabled]) >
    .tree-row:not([active]):not([selected]):hover > .file-row {
  background-color: var(--cros-sys-hover_on_subtle);
}

html.pointer-active #directory-tree .tree-item:not([disabled]) >
    .tree-row:not([active]):not([selected]) > .file-row:active {
  background-color: var(--cros-sys-hover_on_subtle);
}

html.pointer-active #directory-tree
    .tree-row:not([active]):not([selected]):hover > .file-row:not(:active) {
  background-color: unset;
}

html.pointer-active #directory-tree :not(:active) {
  cursor: default;
}

html.drag-drop-active #directory-tree .tree-item.denies > .tree-row > .file-row {
  background-color: var(--cros-sys-error_container);
  color: var(--cros-sys-on_error_container);
}

html.drag-drop-active #directory-tree .tree-item.accepts > .tree-row > .file-row {
  background-color: var(--cros-sys-hover_on_prominent);
}

html.drag-drop-active #directory-tree
    .tree-item.accepts > .tree-row[active] > .file-row {
  background-color: var(--cros-sys-primary);
}

html.focus-outline-visible #directory-tree:focus .tree-row[selected] > .file-row {
  outline: 2px solid var(--cros-sys-focus_ring);
  outline-offset: 2px;
}

#directory-tree .tree-item:not([disabled]) .tree-row[active] > .file-row {
  background-color: var(--cros-sys-primary);
  color: var(--cros-sys-on_primary);
}

#directory-tree .tree-item[disabled] > .tree-row > .file-row {
  cursor: default;
}

#directory-tree .tree-row > .file-row > .align-right-icon {
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
  border-radius: 16px;
  border-style: none;
  box-sizing: border-box;
  flex: none;
  height: 32px;
  left: 1px;
  position: relative;
  right: 1px;
  width: 32px;
  z-index: 1;
}


#directory-tree .tree-row > .file-row > .external-link-icon iron-icon {
  padding: 6px;
}

#directory-tree .tree-row > .file-row > .root-eject {
  --text-color: currentColor;
  --hover-bg-color: var(--cros-sys-hover_on_subtle);
  min-width: 32px;
  padding: 0;
}

#directory-tree .tree-row[active] > .file-row > .root-eject {
  --hover-bg-color: var(--cros-sys-hover_on_prominent);
}

html.col-resize #directory-tree .tree-row > .file-row > .root-eject:hover {
  --hover-bg-color: none;
}

#directory-tree .tree-row > .file-row > .root-eject:focus {
  border: 1px solid var(--cros-sys-focus_ring);
}

#directory-tree .tree-row[active] > .file-row > .root-eject:focus {
  border: 1px solid var(--cros-sys-inverse_primary);
}

#directory-tree .tree-row > .file-row > .root-eject:active {
  --ink-color: var(--cros-sys-ripple_neutral_on_subtle);
  border-width: 0;
}

#directory-tree .tree-row[active] > .file-row > .root-eject:active {
  --ink-color: var(--cros-sys-ripple_neutral_on_prominent);
}
/* Can be removed after new directory replacement. -- END */

/* Splitter. */
/* Prevent the sudden flickering when opening the Files app. "div.splitter" is
  the legacy splitter DOM element. We need to maintain the existing DOM
  structure to make sure it can cater both the legacy splitter style and the
  refresh23 style. In file_manager_ui.js we will remove the legacy ".splitter"
  element if the jelly flag is on, this sudden removal will cause a flickering
  issue due to position change, hence setting a width here for the legacy
  splitter to prevent that.  */
div.splitter {
  width: 24px;
}

div.splitter .splitter-button {
  display: none;
}

.jelly-splitter {
  --xf-splitter-tracker-offset: 16px;
  --xf-splitter-z-index: 500;  /* Must be below the contextmenu (600). */
}

html.pointer-active .jelly-splitter:not(.splitter-active):hover {
  --xf-splitter-cursor: default;
  --xf-splitter-hover-color: none;
}

html.col-resize .jelly-splitter:not(.splitter-active):hover {
  --xf-splitter-cursor: col-resize;
  --xf-splitter-hover-color: none;
}

/* Breadcrumbs and things under the title but above the list view. */
.dialog-header {
  align-items: center;
  background: none;
  box-sizing: border-box;
  color: var(--cros-text-color-secondary);
  display: flex;
  flex: none;
  flex-direction: row;
  font-size: 14px;
  height: 57px;
  overflow: hidden;
  transition: background 220ms ease;
}

body.check-select .dialog-header {
  border-bottom: 1px solid var(--cros-separator-color);
  border-top: 1px solid transparent;
  color: var(--cros-sys-on_primary_container);
}

/* Display a border during check-select mode if we're in a dialog. (This
   can only happen in an open-multi-file dialog). */
body[type='open-multi-file'].check-select .dialog-header {
  border-top: 1px solid var(--cros-bg-color);
}

.dialog-header > .spacer {
  flex: 1 0 48px;
}

.dialog-header cr-button {
  --hover-bg-color: var(--cros-sys-hover_on_subtle);
  --ink-color: var(--cros-sys-ripple_neutral_on_subtle);
  --ripple-opacity: 100%;
  --text-color: currentColor;
  border: none;
  border-radius: 18px;
  box-sizing: border-box;
  color: var(--cros-sys-on_surface);
  cursor: pointer;
  height: 36px;
  min-width: 48px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

html.pointer-active .dialog-header cr-button:not(:active):hover {
  --hover-bg-color: none;
  cursor: default;
}

.dialog-header cr-button::after {
  content: '';
  height: 48px;
  position: absolute;
  width: 48px;
}

.dialog-header cr-button[menu-shown] {
  background-color: var(--cros-sys-primary_container);
  color: var(--cros-sys-on_primary_container);
}

.dialog-header cr-button:not([aria-haspopup]):active {
  background-color: var(--cros-sys-pressed_on_subtle);
}

html.focus-outline-visible .dialog-header cr-button:not(:active):focus {
  outline: 2px solid var(--cros-sys-focus_ring);
}

/** Avoid highlighting if element doesn't have focus by tab (tabindex=-1)
 *  or if focusing during mouse click event ":active" pseudo-selector. */
html.focus-outline-visible .dialog-header
    .menu-button:focus:not([tabindex='-1']):not(:active) {
  background-color: transparent;
}

body.check-select .dialog-header
    .menu-button:focus:not([tabindex='-1']):not(:active) {
  background-color: var(--cros-sys-ripple_neutral_on_subtle);
}

.dialog-header iron-icon,
.dialog-header .icon {
  height: 16px;
  width: 16px;
}

.dialog-header cr-button.icon-button {
  border-radius: 12px;
  height: 40px;
  margin: 4px;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

.dialog-header cr-button.icon-button[aria-haspopup] {
  --ink-color: var(--cros-sys-ripple_primary);
}

.dialog-header cr-button.icon-button > .icon {
  background-position: center;
  background-repeat: no-repeat;
  height: 20px;
  position: absolute;
  width: 20px;
}

.dialog-header cr-button.icon-button > xf-icon {
  position: absolute;
}

.dialog-header #tasks {
  color: var(--cros-sys-primary);
  margin: 0 8px;
  padding-bottom: 0;
  padding-inline: 16px;
  padding-top: 0;
}

.dialog-header #tasks[multiple] {
  padding-inline-end: 12px;
}

.dialog-header cr-button > .icon,
.dialog-header #search-box .clear,
.dialog-header #read-only-icon {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  background-image: none;
}

.dialog-header #search-wrapper {
  display: flex;
}

.dialog-header.files-ng #search-wrapper {
  align-items: center;
  border-radius: 8px;
  height: 48px;
  transition: background-color 200ms ease;
}

.dialog-header.files-ng #search-wrapper.has-cursor,
.dialog-header.files-ng #search-wrapper.has-text,
.dialog-header.files-ng #search-wrapper.hide-pending {
  background-color: var(--cros-sys-input_field_on_base);
}

.dialog-header #search-box cr-input {
  --cr-input-background-color: transparent;
  --cr-input-border-bottom: transparent;
  --cr-input-border-radius: 0;
  --cr-input-color: var(--cros-sys-on_surface);
  --cr-input-error-display: none;
  --cr-input-focus-color: transparent;
  --cr-input-min-height: 20px;
  --cr-input-placeholder-color: var(--cros-sys-secondary);
  --cr-input-padding-end: 0;
  --cr-input-padding-start: 0;
  display: inline-block;
  transition: width 200ms ease;
  vertical-align: middle;
  width: 0;
}

.dialog-header.files-ng #search-button > .icon {
  -webkit-mask-image: url(../images/files/ui/search.svg);
}

.dialog-header.files-ng #sharesheet-button > .icon {
  -webkit-mask-image: url(../images/files/ui/share_ng.svg);
}

.dialog-header.files-ng #delete-button > .icon {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

body.check-select .dialog-header #delete-button > .icon {
  background-image: url(../images/files/ui/delete.svg);
}

.dialog-header #move-to-trash-button > .icon {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

.dialog-header #restore-from-trash-button > .icon {
  -webkit-mask-image: url(../images/files/ui/restore.svg);
}

.dialog-header.files-ng #refresh-button > .icon {
  -webkit-mask-image: url(../images/files/ui/refresh.svg);
}

.dialog-header.files-ng #view-button > .icon {
  -webkit-mask-image: url(../images/files/ui/view_list.svg);
}

body.check-select #view-button {
  display: none;
}

.dialog-header.files-ng #view-button.thumbnail > .icon {
  -webkit-mask-image: url(../images/files/ui/view_thumbnail.svg);
}

body.check-select #view-button.thumbnail {
  display: none;
}

.dialog-header.files-ng #sort-button > .icon {
  -webkit-mask-image: url(../images/files/ui/sorting_ng.svg);
}

body.check-select #sort-button {
  display: none;
}

.dialog-header.files-ng #gear-button > .icon {
  -webkit-mask-image: url(../images/files/ui/menu_ng.svg);
}
body.check-select #gear-button {
  display: none;
}

.dialog-header.files-ng #selection-menu-button > .icon {
  -webkit-mask-image: url(../images/files/ui/menu_ng.svg);
}

body:not(.check-select) #selection-menu-button {
  display: none;
}

#files-selected-label {
  display: none;
  font-weight: 500;
}

body.files-ng #files-selected-label {
  margin-inline: 8px 12px;
}

body.check-select #files-selected-label {
  display: block;
}

#cancel-selection-button {
  --ink-color: var(--cros-sys-ripple_neutral_on_subtle);
  border: none;
  box-shadow: none;
  color: currentColor;
  display: flex;
  text-transform: none;
}

body.files-ng #cancel-selection-button {
  height: 32px;
  margin-inline-start: 12px;
  min-width: 32px;
  padding: 6px;
  width: 32px;
}

html.focus-outline-visible body.files-ng #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
  outline: 2px solid var(--cros-sys-focus_ring);
}

body.files-ng #cancel-selection-button > span#cancel-selection-label {
  display: none;
}

body.files-ng #cancel-selection-button .icon-arrow-back {
  -webkit-mask-image: url(../images/files/ui/list_check.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  flex: none;
  height: 20px;
  width: 20px;
}

#cancel-selection-button-wrapper {
  display: none;
}

#cancel-selection-button > iron-icon {
  margin-inline-end: 6px;
}

#cancel-selection-label {
  flex: auto;
  line-height: 31px;
  overflow: hidden;
  padding-top: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.check-select #cancel-selection-button-wrapper {
  display: block;
}

/* Search button */
body.check-select-v1 #search-button {
  display: none;
}

/* Search box */
#search-box {
  display: flex;
  flex: none;
  font-size: 14px;
}

.dialog-header.files-ng #search-box cr-input::part(input) {
  caret-color: var(--cros-sys-primary);
  margin-inline-end: 16px;
}

body.check-select-v1 #search-box {
  display: none;
}

.dialog-header.files-ng #search-box.has-cursor,
.dialog-header.files-ng #search-box.has-text,
.dialog-header.files-ng #search-box.hide-pending {
  margin-inline-end: 6px;
}

.dialog-header.files-ng #search-box.has-cursor cr-input,
.dialog-header.files-ng #search-box.has-text cr-input,
.dialog-header.files-ng #search-box.hide-pending cr-input {
  --cr-input-width: calc(288px - 74px);
  width: calc(288px - 54px);
}

#search-box .clear {
  cursor: pointer;
  display: none;
  margin: 0;
  min-width: 0;
  position: absolute;
  right: 0;
  visibility: hidden;
}

.dialog-header.files-ng #search-box .clear {
  background: none;
  height: 32px;
  margin-inline-end: 4px;
  padding: 0;
  width: 32px;
}

html:not(.pointer-active) .dialog-header.files-ng #search-box .clear:hover {
  background-color: var(--cros-ripple-color);
}

.dialog-header.files-ng #search-box .clear > .icon {
  -webkit-mask-image: url(../images/files/ui/search_clear_filled.svg);
}

html[dir='rtl'] #search-box .clear {
  left: 0;
  right: auto;
}

.dialog-header.files-ng #search-box.has-cursor .clear,
.dialog-header.files-ng #search-box.has-text .clear {
  display: flex;
}

#search-box.has-text .clear {
  visibility: visible;
}

/* Pinned file toggle */
.dialog-header.files-ng #pinned-toggle-wrapper {
  display: flex;
  flex: none;
}

.dialog-header.files-ng #pinned-toggle-label {
  color: var(--cros-sys-on_surface);
}

.dialog-header.files-ng cr-toggle {
  --cr-toggle-checked-bar-color: var(--cros-sys-primary);
  /* bar color above already defines the opacity, so use 100% here */
  --cr-toggle-checked-bar-opacity: 100%;
  --cr-toggle-checked-button-color: var(--cros-sys-on_primary);
  --cr-toggle-checked-ripple-color: var(--cros-focus-aura-color);
  --cr-toggle-unchecked-bar-color: var(--cros-sys-secondary);
  --cr-toggle-unchecked-button-color: var(--cros-sys-on_secondary);
  --cr-toggle-unchecked-ripple-color: var(--cros-ripple-color);
  --cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
  --cr-toggle-ripple-diameter: 32px;
  margin-inline: 6px;
}

/* only show the ripple ring for tab navigation */
html.focus-outline-visible .dialog-header.files-ng cr-toggle:focus {
  --cr-toggle-ripple-ring: 2px solid var(--cros-focus-ring-color);
}

/* Container for the detail and thumbnail list views. */
.dialog-body {
  flex: auto;
  position: relative;
  transition: all 180ms ease;
}

.main-panel {
  bottom: 0;
  display: flex;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.dialog-middlebar-contents {
  display: flex;
  flex: none;
  max-width: 50%;
  min-width: 45px;
  position: relative;
  width: 180px;
}

/* Container for the ok/cancel buttons. */
.dialog-footer {
  align-items: center;
  background-color: var(--cros-bg-color);
  border-top: 1px solid var(--cros-separator-color);
  display: flex;
  flex: none;
  flex-direction: row;
  outline: none;
  padding: 16px 24px;
}

.dialog-footer #filename-input-box {
  margin-inline-end: 16px;
  margin-inline-start: 16px;
  max-width: 320px;
  min-width: 123px;
}

.dialog-footer cr-input {
  --cr-input-background-color: var(--cros-textfield-background-color);
  --cr-input-border-radius: 0;
  --cr-input-color: var(--cros-textfield-input-color);
  --cr-input-error-color: var(--cros-textfield-label-color-error);
  --cr-input-error-display: none;
  --cr-input-focus-color: var(--cros-textfield-label-color-focus);
  --cr-input-min-height: 32px;
  width: 100%;
}

.dialog-footer .buttonbar {
  display: flex;
  height: 32px;
}

/* Copy style from paper-button for buttons on the footer. */
.dialog-footer button {
  border: 0;
  border-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0;
  outline: none;
  padding: 1px 16px;
  position: relative;
  text-align: center;
  user-select: none;
  z-index: 0;
}

.dialog-footer button[disabled] {
  cursor: auto;
  pointer-events: none;
}

.dialog-footer button {
  font-weight: 500;
}

.dialog-footer button:hover {
  border-image: none;  /* Overrides the definition of common.css. */
}

.dialog-footer cr-button,
.dialog-footer button {
  height: 32px;
  margin: 0 4px;
  min-width: 92px;
}

.dialog-footer cr-button[disabled],
.dialog-footer cr-button[disabled]:hover,
.dialog-footer button[disabled],
.dialog-footer button[disabled]:hover {
  background-color:
      var(--cros-button-background-color-primary-disabled);
  color: var(--cros-button-label-color-primary-disabled);
}

.dialog-footer .primary {
  background-color: var(--cros-button-background-color-primary);
  color: var(--cros-button-label-color-primary);
}

.dialog-footer .primary:hover {
   background: var(--cros-button-background-color-primary-hover-preblended);
}

.dialog-footer .primary paper-ripple {
  --paper-ripple-opacity: var(--cros-button-primary-ripple-opacity);
  color: var(--cros-button-ripple-color-primary);
}

.dialog-footer .primary:active {
  box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-primary),
              0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
}

.dialog-footer .secondary {
  background: transparent;
  border: 1px solid var(--cros-button-stroke-color-secondary);
  color: var(--cros-button-label-color-secondary);
  margin-inline-end: 8px;
}

.dialog-footer .secondary:hover {
  background: var(--cros-button-background-color-secondary-hover);
  border: 1px solid var(--cros-button-stroke-color-secondary-hover);
}

.dialog-footer .secondary paper-ripple {
  --paper-ripple-opacity: var(--cros-button-secondary-ripple-opacity);
  color: var(--cros-button-ripple-color-secondary);
}

.dialog-footer .secondary:active {
  box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
              0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
}

.dialog-footer .select {
  background-color: var(--cros-textfield-background-color);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  margin-inline-start: 16px;
  max-width: 152px;
  min-height: 32px;
  min-width: 104px;
  outline: none;
  padding: 0 36px 0 16px;
  position: relative;
}

.dialog-footer .select::after {
  -webkit-mask-image: url(../images/files/ui/sort_desc.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-primary);
  content: '';
  height: 32px;
  position: absolute;
  right: 0;
  width: 32px;
}

.dialog-footer div.select:not(:active):focus {
  box-shadow: 0 0 0 2px var(--cros-focus-ring-color);
}

.dialog-footer div.select > span {
  color: var(--cros-text-color-primary);
  display: inline-block;
  line-height: 32px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.dialog-footer div.select > div.options {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 4px;
  bottom: calc(100% + 2px);
  box-shadow: var(--cros-elevation-2-shadow);
  left: 0;
  min-width: max-content;
  padding: 8px 0;
  position: absolute;
  right: 0;
  z-index: 550;
}

.dialog-footer div.select > div.options:not([expanded]) {
  display: none;
}

.dialog-footer div.select > div.options option {
  color: var(--cros-menu-label-color);
  line-height: 32px;
  min-height: 32px;
  padding: 0 12px 0 16px;
  vertical-align: middle;
}

.dialog-footer div.select > div.options option:hover,
.dialog-footer div.select > div.options:not(:hover) option.selected {
  background-color: var(--cros-menu-item-background-hover);
}

.dialog-footer select:hover {
  border-image: none;
}

html.focus-outline-visible .dialog-footer .primary:focus,
html.focus-outline-visible .dialog-footer .secondary:focus,
html.focus-outline-visible .dialog-footer select:focus {
  outline: 2px solid var(--cros-focus-ring-color);
  outline-offset: 2px;
}

.progressable:not([progress]) .progress-bar,
.progressable:not([progress]) .preparing-label {
  display: none;
}

.progressable[progress] .ok,
.progressable[progress] #filename-input-box,
.progressable[progress] .file-type {
  display: none;
}

.progressable .preparing-label {
  margin-inline-start: 20px;
}

.progressable .progress-bar {
  flex: auto;
  margin-inline-end: 20px;
  margin-inline-start: 20px;
}

/* The container for breadcrumb elements. */
.breadcrumbs {
  align-items: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding-bottom: 4px;
  padding-inline-start: 8px;
  padding-top: 4px;
}

body.check-select .breadcrumbs {
  display: none;
}

/* The toolbar indicator that means the current directory is read only. */
#read-only-indicator {
  align-items: center;
  background-color: var(--cros-sys-disabled_container);
  border: 1px solid var(--cros-sys-separator);
  border-radius: 8px;
  display: flex;
  flex: none;
  height: 32px;
  padding-inline: 8px 12px;
}

body.check-select #read-only-indicator {
  display: none;
}

.dialog-header.files-ng #read-only-icon {
  -webkit-mask-image: url(../images/files/ui/visibility_ng.svg);
  background-color: var(--cros-icon-color-secondary);
  height: 20px;
  margin-inline-end: 8px;
  width: 20px;
}

#read-only-label {
  flex: none;
  font-size: 13px;
  font-weight: 500;
}

.filelist-panel {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-width: 0;
}

#list-container {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

#empty-folder {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#empty-folder > .image {
  --empty-folder-svg-dot-color: var(--cros-sys-illo-color1-1);
  --empty-folder-svg-file-color: var(--cros-sys-illo-secondary);
  --empty-folder-svg-ellipse-color: var(--cros-sys-illo-color1);
  --empty-folder-svg-folder-color: var(--cros-sys-illo-color1-2);
  margin-top: 64px;
}

.list-view #empty-folder > .image {
  /* The list view has a .table-header at the top, the margin-top should also
  cover that, hence the desired margin plus the .table-header height. */
  margin-top: calc(64px + 49px);
}

#empty-folder > .label {
  color: var(--cros-sys-on_surface);
  font: var(--cros-body-2-font);
  margin-top: 16px;
  text-align: center;
  width: 320px;
}

#detail-table {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  outline: none;
}

#detail-table > list,
.thumbnail-grid {
  flex: auto;
}

#file-list .drag-selection-border {
  background-color: rgba(var(--cros-bg-color-rgb), 30%);
  border: 2px solid rgba(var(--cros-bg-color-rgb), 60%);
  box-sizing: border-box;
  display: flex;
  outline: 1px solid var(--cros-selection-outline);
  position: absolute;
  z-index: 2;
}

.spinner {
  background: url(chrome://resources/images/throbber_small.svg) center/100%
      no-repeat;
  height: 16px;
  left: 50%;
  margin-inline-start: -8px;
  margin-top: -8px;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  width: 16px;
}

.loading-indicator {
  left: calc(50% - 24px);
  position: absolute;
  right: calc(50% - 24px);
  top: 64px;
}

.list-view .loading-indicator {
  /* The list view has a .table-header at the top, the top should also
  cover that, hence the desired top plus the .table-header height. */
  top: calc(64px + 49px);
}

@keyframes heightAnimation {
  0% {
    display: flex;
    height: 0;
  }
}

body.files-ng .button-group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row-reverse;
  margin-inline-start: auto;
  padding-inline-start: 48px;
}

body.files-ng .button-group > a {
  text-decoration-line: none;
}

body.files-ng .banner-close {
  border: 0;
  height: 32px;
  margin-inline-end: 20px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
  position: relative;
}

/* The cr.ui.Grid representing the detailed file list. */
.thumbnail-grid {
  /* On the right side, we have less margin to pack items as long as they are
     fully visible. */
  box-sizing: border-box;
  overflow-y: auto;
  width: 100%;
}

body.files-ng grid .grid-title {
  box-sizing: border-box;
  color: var(--cros-sys-on_surface);
  font-family: 'Roboto Medium';
  padding-inline-start: 16px;
  padding-top: 20px;
  /* Make sure clicking this area can unselect file grids. */
  pointer-events: none;
  width: 100%;
}

grid .grid-title.group-by-isDirectory {
  /* Folders/Files heading doesn't have border bottom, so having a padding
   * bottom together with grid item's margin-top will make the gap too big.
   * To prevent that, we can treat grid item (.thumbnail-item)'s margin-top
   * (16px) as heading's padding bottom, that's why we use the desired height
   * to minus the margin-top value here.
   */
  height: calc(56px - 16px);
}

grid .grid-title.group-by-modificationTime {
  border-bottom: 1px solid var(--cros-separator-color);
  /* The desired height plus the border width. */
  height: calc(56px + 1px);
  padding-bottom: 16px;
}

body.files-ng .thumbnail-frame > .img-container {
  position: relative;
}

#list-container.thumbnail-view .inline-status,
#list-container.thumbnail-view .inline-status .progress,
#list-container.thumbnail-view .inline-status xf-icon {
  display: none;
  height: 16px;
  width: 16px;
}

#list-container.thumbnail-view .inline-status {
  align-items: center;
  color: var(--cros-sys-secondary);
  justify-content: center;
  position: absolute;
  right: 4px;
  top: 4px;
}

#list-container.thumbnail-view li.directory .inline-status {
  height: 100%;
  top: 0;
}

#list-container.thumbnail-view li.pinned:not([renaming]):not(.dim-offline) .inline-status,
#list-container.thumbnail-view li.pinned:not([renaming]):not(.dim-offline) .inline-status xf-icon,
#list-container.thumbnail-view li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status,
#list-container.thumbnail-view li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status .progress {
  display: flex;
}

#list-container.thumbnail-view li.pinned .inline-status xf-icon[type=offline] {
  --xf-icon-color: currentColor;
}

#list-container.thumbnail-view .thumbnail-grid:focus
    .thumbnail-item[selected] .inline-status,
#list-container.thumbnail-view .thumbnail-grid:focus
    .thumbnail-item[lead] .inline-status {
  color: var(--cros-sys-on_secondary_container);
}

#list-container.thumbnail-view .thumbnail-grid
    .thumbnail-item[selected] .inline-status,
#list-container.thumbnail-view .thumbnail-grid
    .thumbnail-item[lead] .inline-status {
  color: var(--cros-sys-on_surface);
}

body.check-select #list-container.thumbnail-view .thumbnail-grid:focus
    .thumbnail-item[selected] .inline-status,
body.check-select #list-container.thumbnail-view .thumbnail-grid:focus
    .thumbnail-item[selected] .inline-status {
  color: var(--cros-sys-on_primary_container);
}

/* Only display outlines for entries with thumbnails. */
#list-container.thumbnail-view li:has(.thumbnail) .inline-status .progress,
#list-container.thumbnail-view li.pinned:has(.thumbnail) .inline-status xf-icon[type=offline] {
  --xf-icon-color-outline: var(--cros-sys-app_base);
}

html:not(.pointer-active) body[type='full-page'] .thumbnail-frame > .img-container,
body[type='full-page'] .thumbnail-frame > .img-container:active,
html:not(.pointer-active) body[type='full-page'] .detail-name .detail-icon,
body[type='full-page'] .detail-name .detail-icon:active {
  cursor: pointer;
}

.thumbnail-bottom {
  align-items: center;
  bottom: 0;
  cursor: auto;
  display: flex;
  flex-direction: row;
  left: 0;
  padding: 0;
  position: absolute;
  right: 0;
}

.thumbnail-bottom .detail-icon {
  flex: none;
  height: 16px;
  width: 16px;
}

.thumbnail-bottom .filename-label {
  flex: auto;
  font-weight: normal;
  padding-inline-end: 8px;
}

/* Styles specific for the grid view. */

.thumbnail-grid .thumbnail-item {
  background-color: var(--cros-sys-app_base);
  border-radius: 12px;
  height: 160px;
  margin-inline-start: 16px;
  margin-top: 16px;
  overflow: hidden;
  position: relative;
  vertical-align: top;  /* Prevent vertical spacing for wrapped inline box. */
  width: 160px;
}

.thumbnail-grid .thumbnail-item.directory.pinned .filename-label {
  padding-inline-end: 24px;
}

.thumbnail-item.directory   {
  box-shadow: none;
  height: 48px;
}

#list-container .thumbnail-grid li {
  border: 1px solid var(--cros-sys-separator);
}

grid .thumbnail-bottom .detail-icon {
  height: 48px;
  padding-inline-end: 6px;
  padding-inline-start: 6px;
  width: 32px;
}

html:not(.pointer-active) grid .thumbnail-bottom .detail-icon,
grid .thumbnail-bottom .detail-icon:active {
  cursor: pointer;
}

.thumbnail-grid .thumbnail-frame {
  height: 100%;
  width: 100%;
}

.thumbnail-grid .img-container {
  color: var(--cros-sys-on_surface_bodytext);
  height: 112px;
  width: 100%;
}

.thumbnail-grid .img-container > .thumbnail {
  -webkit-user-drag: none;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  opacity: 1;
  position: absolute;
  width: 100%;
}

.thumbnail-grid .thumbnail-bottom {
  color: var(--cros-sys-on_surface);
  height: 48px;
}

.thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom,
.thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom,
.thumbnail-grid .thumbnail-item[selected].directory
    .thumbnail-bottom,
.thumbnail-grid .thumbnail-item[lead].directory
    .thumbnail-bottom {
  background-color: var(--cros-sys-surface_variant);
}

.thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[selected].directory
    .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[lead].directory
    .thumbnail-bottom {
  background-color: var(--cros-sys-secondary_container);
  color: var(--cros-sys-on_secondary_container);
}

body.check-select .thumbnail-grid:focus .thumbnail-item[selected]
    .thumbnail-bottom,
body.check-select .thumbnail-grid:focus .thumbnail-item[lead]
    .thumbnail-bottom,
body.check-select .thumbnail-grid:focus
    .thumbnail-item[selected].directory .thumbnail-bottom,
body.check-select .thumbnail-grid:focus .thumbnail-item[lead].directory
    .thumbnail-bottom {
  background-color: var(--cros-sys-primary_container);
  color: var(--cros-sys-on_primary_container);
}

body.check-select #list-container .thumbnail-grid:focus
    .thumbnail-item[lead],
#list-container .thumbnail-grid:focus
    .thumbnail-item[lead]:not([selected]) {
  /* 2px border: 1px via box-shadow + 1px via border, to accommodate
     the difference between regular border 1px and selected border 2px.*/
  border-color: var(--cros-sys-focus_ring);
  box-shadow: 0 0 0 1px var(--cros-sys-focus_ring);
}

body.check-select #list-container .thumbnail-grid
    .thumbnail-item[lead],
#list-container .thumbnail-grid
    .thumbnail-item[lead]:not([selected]) {
  /* 2px border: 1px via box-shadow + 1px via border, to accommodate
     the difference between regular border 1px and selected border 2px.*/
  border-color: var(--cros-sys-on_surface_variant);
  box-shadow: 0 0 0 1px var(--cros-sys-on_surface_variant);
}

.thumbnail-grid > .spacer.folder-spacer {
  height: 5px;
}

.thumbnail-grid > .spacer {
  height: 0;
}

body:not(.check-select) .thumbnail-grid.image-dominant
    .can-hide-filename.thumbnail-loaded:not([selected]) .thumbnail-bottom {
  display: none;
}

/* Padding counterweights negative margins of items, thus eliminating scroll
   bar when it's not needed. Max height is set to fit 8 items before showing
   scroll bar. */
body.files-ng #default-tasks-list {
  height: 240px;
  margin-bottom: 32px;
  margin-top: 20px;
  padding-inline: 32px;
}

#default-task-dialog.bottom-shadow::after {
  background:
      linear-gradient(transparent 0, var(--cros-sys-base_elevated) 100%);
  bottom: 24px;
  content: '';
  height: 40px;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%
}

#default-tasks-list li {
  height: 40px;
  line-height: 40px;
}

#default-tasks-list > li > .icon {
  -webkit-mask-position: 16px center;
  -webkit-mask-repeat: no-repeat;
  background-position: 16px center;
  background-repeat: no-repeat;
  background-size: 20px;
  height: 100%;
}

#default-tasks-list > li > .label {
  padding-inline-start: 52px;
  position: absolute;
}

html[dir='rtl'] #default-tasks-list > li > .icon {
  -webkit-mask-position-x: calc(100% - 16px);
  background-position-x: calc(100% - 16px);
}

body.files-ng #list-container list > li[selected],
body.files-ng #list-container list > li:active,
body.files-ng #list-container list > li.accepts,
body.files-ng #list-container list > li[lead] {
  background-color: var(--cros-sys-surface_variant);
}

body.files-ng #list-container list:focus > li[selected],
body.files-ng #list-container list:focus > li.accepts[selected],
body.files-ng #list-container list:focus > li[lead] {
  background-color: var(--cros-sys-secondary_container);
}

body.files-ng #default-tasks-list:focus > li[selected],
body.files-ng #default-tasks-list > li[selected] {
  background-color: var(--cros-sys-primary_container);
  color: var(--cros-sys-on_primary_container);
  outline: none;
}

body.files-ng #default-tasks-list li[selected]::after {
  -webkit-mask-image: url(../images/common/ic_selected.svg);
  -webkit-mask-position: right;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-sys-on_primary_container);
  content: ' ';
  height: 40px;
  position: absolute;
  right: 16px;
  top: 0;
  width: 40px;
}

html[dir='rtl'] body.files-ng #default-tasks-list li[selected]::after {
  background-position: left;
  left: 16px;
  right: unset;
}

#list-container li {
  border: 2px solid transparent;
}

/* Modify GROUP_HEADING_HEIGHT in file_table_list.js if this height changes. */
#list-container .group-heading {
  border-bottom: 1px solid var(--cros-separator-color);
  box-sizing: border-box;
  color: var(--cros-text-color-secondary);
  font-family: 'Roboto Medium';
  /* The desired height plus the border width. */
  height: calc(56px + 1px);
  padding-inline-start: 16px;
  padding-top: 20px;
  /* Make sure clicking this area can unselect file items. */
  pointer-events: none;
  width: 100%;
}

/*
 * selector "li[lead]" is for the row just being operated on,
 * e.g. with mouse: click/select/unselect
 *      with keyboard: Ctrl + ArrowUp/ArrowDown to move
 */
body.check-select #list-container list:focus > li[lead],
body.check-select #list-container list:focus > li[selected] {
  background-color: var(--cros-sys-primary_container);
}

body.check-select #list-container list:focus > li[lead] {
  border: 2px solid var(--cros-sys-focus_ring);
}

body.check-select #list-container list > li[lead],
body.check-select #list-container list > li[selected] {
  background-color: var(--cros-sys-surface_variant);
}

body.check-select #list-container list > li[lead] {
  border: 2px solid var(--cros-sys-on_surface_variant);
}

#list-container grid > .accepts {
  background-color: var(--cros-highlight-color-hover)
}

#directory-tree .tree-item.accepts > .tree-row,
#list-container list > li.accepts,
#list-container grid > li.accepts {
  animation: acceptsBlink 200ms linear 1s 3;
}

@keyframes acceptsBlink {
  0% {
    background-color: transparent;
    color: var(--cros-ripple-color);
  }
}

.table-row-cell .filename-label,
.thumbnail-item .filename-label,
/* Show ellipsis in cells. The name column has different structure and overrides
   this rule. */
.table-row-cell > div {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

/* Text box used for renaming in the detail list. */
.table-row-cell input.rename {
  border-width: 0;
  min-width: 0;
  padding: 2px 0;
}

input.rename:focus,
#directory-tree .tree-row > .file-row .rename-placeholder > input:focus,
#directory-tree .tree-row > .file-row > input:focus {
  background-color: var(--cros-sys-app_base);
  border: none;
  border-radius: 2px;
  color: var(--cros-sys-on_surface);
  outline: 2px solid var(--cros-sys-focus_ring);
}

input.rename::selection,
#directory-tree .tree-row > .file-row .rename-placeholder > input::selection,
#directory-tree .tree-row > .file-row > input::selection {
  background-color: var(--cros-sys-highlight_text);
}

input.rename {
  font: inherit;
  line-height: 1;
  text-align: inherit;
}

.table-row-cell .filename-label {
  flex: initial;
}

.table-row-cell input.rename {
  flex: auto;
}

body.files-ng #list-container input.rename {
  margin-inline-end: 12px;
}

li[renaming=''] .filename-label {
  display: none;
}

/* Text box used for renaming in the thumbnail list. */
.thumbnail-grid input.rename {
  box-sizing: border-box;
  width: 100%;
}

/* The cr.ui.Table representing the detailed file list. */
.detail-table {
  width: 100%;
}

.dialog-footer > .left {
  align-items: center;
  display: flex;
  flex: auto;
  flex-direction: row;
}

.dialog-footer > .right {
  align-items: center;
  flex: none;
  justify-content: flex-end;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Table splitter element */
.table-header-splitter:last-child {
  display: none;
}

/* Container for a table header. */
.table-header {
  border-bottom: 1px solid var(--cros-separator-color);
  box-sizing: border-box;
  color: var(--cros-sys-on_surface);
  flex: none;
  font-family: 'Roboto Medium';
  /* The desired height plus the border bottom. */
  height: calc(48px + 1px);
  line-height: 20px;
}

/* Text label in a table header. */
.table-header-label {
  color: inherit;
  font-weight: normal;
  line-height: 20px;
  margin: 0 10px;
  margin-inline-end: 0;
  margin-inline-start: 32px;
}

.table-row-cell > * {
  align-items: center;
  flex: auto;
  flex-direction: row;
  padding: 0 10px;
}

.table-row-cell > .detail-name {
  display: flex;
}

.table-row-cell {
  align-items: center;
}

/* The icon in the name column. See file_types.css for specific icons. */
.detail-icon {
  height: 24px;
  width: 24px;
}

.status-icon {
  height: 24px;
  margin-inline-end: 10px;
  width: 24px;
}

/* The managed icon in the details list for DLP restricted files. */
.dlp-managed-icon {
  -webkit-mask-image: url(chrome://resources/images/business.svg);
  -webkit-mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  background-color: currentColor;
  height: 24px;
  margin-inline-end: 14px;
  margin-inline-start: auto;
  padding-inline-start: 8px;
  width: 24px;
}

#list-container list li .detail-icon {
  height: 48px;
  margin-inline-end: 20px;
  margin-inline-start: 20px;
  width: 24px;
}

#list-container li .detail-checkmark {
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  opacity: 0;
  position: absolute;
  transition: opacity 220ms ease;
}

body.check-select #list-container li[selected] .detail-checkmark {
  opacity: 1;
}

#list-container list li .detail-thumbnail {
  overflow: hidden;
}

#list-container list li .detail-thumbnail > .thumbnail {
  -webkit-user-drag: none;
  background-color: var(--cros-highlight-color-hover);
  background-position: center;
  background-size: cover;
  border-radius: 14px;
  height: 100%;
  isolation: isolate;
  opacity: 1;
  width: 100%;
}

body.check-select #list-container list li[selected] .detail-thumbnail
> .thumbnail {
  /* Fade out after checkmark fades in. */
  animation: fadeOut 0ms 220ms ease backwards;
  opacity: 0;
}

#tasks-menu cr-menu-item.change-default .icon.start {
  display: none;
}

#action-bar {
  display: flex;
  flex: none;
}

.dialog-header.files-ng #action-bar {
  align-items: center;
  height: 48px;
}

.detail-name > * {
  align-items: center;
  display: flex;
  flex: none;
}

#filename-input-box {
  align-items: center;
  display: flex;
  flex: auto;
  margin-inline-end: 30px;
  margin-inline-start: 30px;
}

body:not([type='saveas-file']) #filename-input-box {
  display: none;
}

/* Dimmed items */

body[type='folder'] .file > *,
body[type='upload-folder'] .file > *,
.dialog-container[connection='OFFLINE'] .dim-offline > *,
body[block-hosted-docs] .file.dim-hosted > *,
body[block-encrypted] .file.dim-encrypted > *,
.thumbnail-grid [disabled] > *,
#detail-table [disabled] > *,
#directory-tree .tree-item[disabled] > .tree-row > .file-row  {
  opacity: 0.38; /* TODO: no token for this right now. */
}

/* Invisible container for elements representing files while dragging. */
body.files-ng #drag-container {
  background-color: transparent;
  height: calc(12px + 40px + 8px + 8px);
  left: 0;
  position: fixed;
  top: 0;
  width: calc(8px + 192px + 8px + 8px);
  z-index: -1;  /* below .dialog-container */
}

body.files-ng #drag-container .drag-box {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 2px;
  box-shadow: var(--cros-elevation-2-shadow);
  box-sizing: border-box;
  height: 40px;
  position: absolute;
  width: 192px;
}

body.files-ng #drag-container .drag-contents {
  align-items: center;
  display: flex;
  left: 8px;
  padding-inline-end: 2px;
  padding-inline-start: 8px;
  right: 8px;
  top: 12px;
}

body.files-ng #drag-container .drag-multiple {
  left: calc(8px + 8px);
  right: calc(8px + 8px);
  top: calc(12px + 8px);
}

body.files-ng #drag-container .detail-icon {
  border-radius: 50%;
  flex: none;
}

body.files-ng #drag-container .detail-icon[file-type-icon] {
  color: var(--cros-icon-color-primary);
}

body.files-ng #drag-container .label {
  color: var(--cros-text-color-primary);
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.files-ng #drag-container .drag-bubble {
  background-color: var(--cros-icon-color-prominent);
  border-radius: 12px;
  color: var(--cros-bg-color);
  font-size: 14px;
  font-weight: 700;
  height: 24px;
  line-height: 24px;
  max-width: fit-content;
  padding: 0 8px;
  position: absolute;
  right: calc(8px * 0.5);
  white-space: nowrap;
}

html[dir=rtl] body.files-ng #drag-container .drag-bubble {
  left: calc(8px * 0.5);
  right: unset;
}

/* TODO(fukino): Gather menu-related definitions into one place. */
cr-menu#file-context-menu {
  min-width: 208px;
  z-index: 600;  /* Must be below the overlay pane (1000). */
}

cr-menu#file-context-menu > :not(hr) {
  padding-inline-end: 8px;
}

cr-menu#file-context-menu.toolbar-menu > .hide-on-toolbar {
  display: none;
}

cr-menu.chrome-menu hr {
  color: transparent;
  font-size: 0;
}

body[drive='unmounted'] .dialog-container #list-container,
body[drive='mounting'] .dialog-container #list-container,
body[drive='error'] .dialog-container #list-container,
body[unformatted] .dialog-container #list-container {
  opacity: 0;
}

.buttonbar > * {
  position: relative;
}

#list-container .table-header-inner {
  height: 100%;
}

#list-container .table-header-cell:hover {
  background-color: inherit;
}

#list-container .table-header-cell:first-child {
  box-sizing: border-box;
  display: flex;
  padding-inline-start: 8px;
}

#list-container .table-header-cell:first-child {
  padding-inline-start: 0;
}

.table-header-cell {
  padding-bottom: 8px;
  padding-top: 8px;
}

html:not(.pointer-active) .table-header-cell,
.table-header-cell:active {
  cursor: pointer;
}

#list-container .table-header-cell:first-child
.table-header-label {
  margin-inline-start: 20px;
}

.table-header-label .sort-icon {
  --cr-icon-button-fill-color: var(--cros-sys-on_surface);
  --cr-icon-button-icon-size: 16px;
  --cr-icon-button-focus-outline-color: var(--cros-sys-focus_ring);
  --cr-icon-button-hover-background-color: var(--cros-sys-hover_on_subtle);
  --cr-icon-button-size: 32px;
  border-radius: 50%;
  cursor: default;
}

.table-header-label .sort-icon:active {
  background: var(--cros-sys-pressed_on_subtle);
}

html:not(.pointer-active) .table-header-label .sort-icon:hover,
.table-header-label .sort-icon:active {
  cursor: pointer;
}

.table-header-label .not-sorted .sort-icon {
  display: none;
}

html.pointer-active .table-header-label .sort-icon:not(:active):hover,
html.col-resize .table-header-label .sort-icon:not(:active):hover {
  --cr-icon-button-hover-background-color: none;
}

.table-label-container {
  align-items: center;
  display: flex;
  height: 32px;
}

/* Text in the column header */
.table-label-container > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-container li.table-row {
  background-color: var(--cros-sys-app_base);
  box-sizing: border-box;
  height: 48px;
  line-height: 20px;
}

.check-select #list-container list li[selected] .detail-thumbnail
> .thumbnail {
  animation: none;
}

#list-container list li .detail-thumbnail > .thumbnail {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}

.table-row-cell > * {
  color: var(--cros-sys-on_surface);
  padding: 0;
  padding-inline-start: 32px;
  padding-top: 0 !important;
}

.table-row-cell .dlp-managed-icon,
.table-row-cell .inline-status {
  color: var(--cros-sys-secondary);
}

list:focus li[selected] .table-row-cell > * {
  color: var(--cros-sys-on_secondary_container);
}

list:focus li[selected] .table-row-cell .dlp-managed-icon,
    list:focus li[selected] .table-row-cell .inline-status {
  color: var(--cros-sys-on_secondary_container);
}

.check-select list:focus li[selected] .table-row-cell > * {
  color: var(--cros-sys-on_primary_container);
}

.check-select list:focus li[selected] .table-row-cell .dlp-managed-icon,
    .check-select list:focus li[selected] .table-row-cell .inline-status {
  color: var(--cros-sys-on_primary_container);
}

.table-row-cell > .dateholder {
  display: flex;
}

.table-row-cell > .dateholder > .date {
  flex: 1 1;
  overflow: hidden;
}

.table-row-cell > .dateholder > .dlp-managed-icon {
  flex: 0 0 24px;
  margin-inline-start: 8px;
}

.table-header-splitter  {
  background: none;
  height: 32px;
  margin-top: 8px;
  width: auto;
}

.table-header-splitter .splitter-icon {
  /*
   * TODO(crbug.com/1268206): the icon is not in disabled state, a new css
   * variable needs to be created and applied here.
   */
  --cr-icon-button-fill-color: var(--cros-sys-outline);
  --cr-icon-button-hover-background-color: var(--cros-ripple-color);
  --cr-icon-button-icon-size: 32px;
  --cr-icon-button-margin-start: 0px;
  --cr-icon-button-size: 32px;
  --cr-icon-button-stroke-color: var(--cros-sys-outline);
  cursor: default;
  height: 32px;
}

.table-header-splitter .splitter-icon:active {
  background: var(--cros-sys-pressed_on_subtle);
}

html:not(.pointer-active) .table-header-splitter .splitter-icon:hover {
  cursor: col-resize;
}

html.pointer-active .table-header-splitter .splitter-icon:not(:active):hover,
html.col-resize .table-header-splitter .splitter-icon:not(:active):hover {
  --cr-icon-button-hover-background-color: none;
}

#list-container .table-row-cell .size {
  padding-inline-end: 5px;
  padding-inline-start: 32px;
}

.table-row-cell:first-child > * {
  padding-inline-start: 0;
}

.table-row-cell .filename-label {
  flex-grow: 1;
  margin-inline-end: 8px;
  padding-top: 0;
}

.check-select li[selected] .filename-label {
  font-weight: 500;
}

body.files-ng #list-container li .detail-checkmark {
  -webkit-mask-image: url(../images/files/ui/list_check.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  background-image: none;
  height: 20px;
  width: 20px;
}

list li .detail-checkmark {
  margin-inline-start: 2px;
}

grid li .detail-checkmark {
  margin-inline-start: 6px;
  margin-top: 14px;
}

body.files-ng #list-container :focus li .detail-checkmark {
  color: var(--cros-sys-on_primary_container);
}

body.files-ng #list-container li .detail-checkmark {
  color: var(--cros-sys-on_surface);
}

#list-container .list .encryption-status,
#list-container .list .encryption-status xf-icon,
#list-container .list .inline-status,
#list-container .list .inline-status .progress,
#list-container .list .inline-status xf-icon {
  display: none;
  height: 16px;
  width: 16px;
}

#list-container .list .inline-status {
  align-items: center;
  justify-content: center;
}

#list-container .list li.encrypted:not([renaming]) .encryption-status,
#list-container .list li.encrypted:not([renaming]) .encryption-status xf-icon[type=encrypted],
#list-container .list li.pinned:not([renaming]):not(.dim-offline) .inline-status,
#list-container .list li.pinned:not([renaming]):not(.dim-offline) .inline-status xf-icon,
#list-container .list li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status,
#list-container .list li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status .progress {
  display: flex;
}

#list-container .list li.encrypted .encryption-status xf-icon[type=encrypted],
#list-container .list li.pinned .inline-status xf-icon[type=offline] {
  --xf-icon-color: currentColor;
}

#list-container .list li.encrypted:not([renaming]) .filename-label {
  flex-grow: 0;
}

#list-container .list li.encrypted:not([renaming]) .encryption-status {
  flex-grow: 1;
}

#new-folder-button {
  flex: none;
}

/* Default task dialog has its own background color for title and text
   section. */
.cr-dialog-container #default-task-dialog {
  /* Override the default padding so we can have background color for different
     sections in the dialog. */
  padding: 0;
  width: 352px;
}

.cr-dialog-container #default-task-dialog .cr-dialog-title {
  background-color: var(--cros-sys-surface1);
  border-radius: 20px 20px 0 0;
  margin-bottom: 0;
  padding: 32px 32px 16px;
}

.cr-dialog-container #default-task-dialog .cr-dialog-text {
  background-color: var(--cros-sys-surface1);
  padding: 0 32px 20px;
}

.install-linux-package-details-frame {
  border: 1px solid var(--cros-sys-separator);
  display: block;
  height: 150px;
  overflow: scroll;
  padding: 8px 10px;
  user-select: text;
}

.files-ng .install-linux-package-details-frame {
  margin-top: 16px;
}

.cr-dialog-container.files-ng .install-linux-package-details-label {
  margin-bottom: 10px;
}

.cr-dialog-container.files-ng .install-linux-package-detail-label {
  color: var(--cros-sys-on_surface);
  display: inline;
  margin-inline-end: 5px;
}

.cr-dialog-container.files-ng .install-linux-package-detail-value {
  color: var(--cros-sys-secondary);
  display: inline;
  margin-bottom: 5px;
  white-space: pre-wrap;
}

list.autocomplete-suggestions {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 3px;
  box-shadow: var(--cros-elevation-2-shadow);
  box-sizing: border-box;  /* To match the width with the search box's. */
  color: var(--cros-menu-label-color);
  flex: none;
  margin-inline-start: -47px;
  margin-top: 7px;
  overflow: hidden;
  padding: 8px 0;
  position: fixed;
  /* TODO(crbug.com/1289086): Remove the hard-code with, use JS to set it. */
  width: 286px !important; /* This overrides the value specified by script. */
  z-index: 550;
}

list.autocomplete-suggestions > li {
  align-items: center;
  display: flex;
  height: 32px;
}

/* "search drive" row */
list.autocomplete-suggestions > li:first-of-type {
  color: var(--cros-text-color-secondary);
}

list.autocomplete-suggestions > li > div.detail-icon {
  flex: none;
  height: 32px;
  width: 32px;
}

list.autocomplete-suggestions > li > div.detail-text {
  flex: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

list.autocomplete-suggestions > li > div.detail-text em {
  font-style: normal;
}

list.autocomplete-suggestions > li > div[search-icon] {
  -webkit-mask-image: url(../images/files/ui/search.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
}

list.autocomplete-suggestions > [selected],
list.autocomplete-suggestions > [lead] {
  background-color: var(--cros-menu-item-background-hover);
}

#gear-menu > cr-menu-item:not(.menuitem-button),
#sort-menu > cr-menu-item {
  margin-inline-end: 50px;
}

.cr-dialog-container.files-ng #suggest-app-dialog.cr-dialog-frame {
  max-width: unset !important;
  min-width: unset !important;
  width: 735px;
}

.error-dialog-frame .error-dialog-img {
  background-image: -webkit-image-set(
    url(chrome://theme/IDR_ERROR_NETWORK_GENERIC) 1x,
    url(chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x) 2x);
  background-position: center;
  background-repeat: no-repeat;
  height: 40px;
}

.error-dialog-frame .cr-dialog-cancel {
  display: none;
}

.error-dialog-frame .cr-dialog-close,
.error-dialog-frame .cr-dialog-title {
  display: none;
}

.error-dialog-frame .cr-dialog-text {
  text-align: center;
}

/* Feedback panels */

.files-feedback-panels {
  align-items: flex-end;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 24px;
  z-index: 502; /* Above splitter, but below quickview. */
}

.signals-overscroll {
  min-height: calc(68px + 24px);
}

#quick-view {
  z-index: 505; /* Must be above the scroll bar (500). */
}

files-toast {
  /* Must be above the splitter (500) but below menu-like UI (550). */
  z-index: 520;
}

/* File type filter buttons in Recents view. */
#file-type-filter-container {
  display: flex;
  padding-bottom: 12px;
  padding-inline: 20px;
  padding-top: 12px;
}

.file-type-filter-button {
  --border-color: var(--cros-sys-separator);
  --cr-button-height: 32px;
  --hover-bg-color: var(--cros-sys-hover_on_subtle);
  --hover-border-color: var(--cros-sys-separator);
  --ink-color: var(--cros-sys-ripple_neutral_on_subtle);
  --ripple-opacity: 100%;
  --text-color: var(--cros-sys-on_surface);
  border-radius: 8px;
  margin-inline: 4px;
  min-width: auto;
  padding-inline: 12px;
}

.file-type-filter-button.active {
  --text-color: var(--cros-sys-on_secondary_container);
  background-color: var(--cros-sys-secondary_container);
}

html.pointer-active .file-type-filter-button:not(:active) {
  --hover-bg-color: none;
  cursor: default;
}

html.focus-outline-visible .file-type-filter-button:focus {
  outline: 2px solid var(--cros-sys-focus_ring);
  outline-offset: 2px;
}

/*
 * Preventing FOUC
 */
cr-input:not(:defined),
files-tooltip:not(:defined) {
  display: none;
}

/*
 * Banner styles.
 */
#banners > * {
  align-items: center;
  display: flex !important;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms ease 50ms;
  visibility: hidden;
}

#banners > *:not([hidden]) {
  background-color: var(--cros-sys-app_base_shaded);
  border-radius: 8px;
  height: auto;
  margin-inline-end: 16px;
  margin-inline-start: 16px;
  max-height: 300px;
  min-height: 46px;
  opacity: 1;
  padding-bottom: 13px;
  padding-inline-end: 8px;
  padding-inline-start: 0;
  padding-top: 13px;
  visibility: visible;
}

#path-display-container {
  background-color: var(--cros-sys-app_base_shaded);
}
